<template>
  <div class="dashboard-main">
    <div class="notice-frame"></div>
    <el-row :gutter="12">
      <el-col :span="6">
        <span class="warn">待审核订单&nbsp;&nbsp;{{ orderList.filter(a => a.status == 2)[0]?orderList.filter(a => a.status == 2)[0].count:0 }}</span>
      </el-col>
      <el-col :span="5">
        <el-button @click="gotoOrder(2)"
                   style="margin-bottom:10px;"
                   size="small"
                   type="primary">查看</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="12">
      <el-col :span="6">
        <span class="warn">待确认货好时间订单&nbsp;&nbsp;{{ orderList.filter(a => a.status == 4)[0]?orderList.filter(a => a.status == 4)[0].count:0 }}</span>
      </el-col>
      <el-col :span="5">
        <el-button @click="gotoOrder(4)"
                   style="margin-bottom:10px;"
                   size="small"
                   type="primary">查看</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="12">
      <el-col :span="6">
        <span class="warn">待确认货物到港时间订单&nbsp;&nbsp;{{ orderList.filter(a => a.status == 11)[0]?orderList.filter(a => a.status == 11)[0].count:0 }}</span>
      </el-col>
      <el-col :span="5">
        <el-button @click="gotoOrder(11)"
                   style="margin-bottom:10px;"
                   size="small"
                   type="primary">查看</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card shadow="hover"
                 class="box-card">
          <div slot="header"
               class="clearfix">
            <div class="point"></div>
            <span>订单数量</span>
            <div class="main-title-right">
              <span>{{ orderSize }}</span>
              <a>(单)</a>
            </div>
          </div>
          <div v-for="o in orderList"
               :key="o.$index"
               @click="gotoOrder(o.status)"
               :class="o.statusClass">
            {{ o.statusName }}&nbsp;&nbsp;{{ o.count }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover"
                 class="box-card">
          <div slot="header"
               class="clearfix">
            <div class="point"></div>
            <span>注意事项</span>
          </div>
          <div v-for="(todo, key) in todoList"
               :key="key"
               class="todo-text-area">
            <template v-if="todo.msg.indexOf('下单中') > 0">
              <span v-if="todo.overTime < 15"
                    class="check-text">{{ todo.msg }}</span>
              <span v-else
                    class="warning-text">{{ todo.msg }}</span>
            </template>
            <template v-else>
              <span v-if="todo.overTime < 90"
                    class="check-text">{{ todo.msg }}</span>
              <span v-else
                    class="warning-text">{{ todo.msg }}</span>
            </template>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover"
                 class="box-card">
          <div slot="header"
               class="clearfix">
            <div class="point"></div>
            <span>笔记</span>
            <el-button style="float: right; padding: 3px 0"
                       @click="saveNote"
                       type="text">保存</el-button>
          </div>
          <textarea v-model="note"></textarea>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss">
.dashboard-main {
  width: 100%;
  height: 100%;
  padding: 20px 20px;
  background-color: #fff;
}
.warn {
  color: #000;
  font-size: 20px;
  margin-right: 30px;
}
.point {
  float: left;
  margin-top: 4px;
  margin-right: 5px;
  height: 12px;
  border: 2px solid #58a3f3;
}
.clearfix span {
  font-size: 16px;
}
.todo-text-area {
  text-align: left;
  padding: 20px;
  font-size: 15px;
}
.warning-text {
  color: red;
}
.check-text {
  color: #f3a615e8;
}

textarea {
  margin-top: 10px;
  width: 100%;
  height: 400px;
  outline: none;
  font-size: 15px;
}

.main-title-right {
  float: right !important;
  & > span {
    font-size: 18px;
    color: #58a3f3;
  }
  & > a {
    font-size: 14px;
    color: #b4b9c6;
  }
}
.warning {
  color: red !important;
}
.text {
  font-size: 16px;
  text-align: center;
  padding: 20px;
  &:hover {
    color: #fff;
  }
}
.item {
  margin-top: 20px;
  width: 100%;
  height: 60px;
  background-color: #f7f9fc;
  border: 1px solid #ecedf2;
  border-radius: 3px;
  &:hover {
    background: #54a8f7;
    border-radius: 3px;
  }
}
.el-card__body {
  padding-top: 0;
}
</style>

<script>
import { mapGetters } from 'vuex'
import { api } from '@/api'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'

export default {
  data() {
    return {
      userId: null,
      orderSize: 0,
      userSize: 0,
      productSize: 0,
      note: null,
      todoList: [],
      orderList: [],
      userList: [],
      productList: []
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  activated() {
    this.setUser()
    this.getOrderCountList()
    this.getTodoList()
    this.getNote()
  },
  methods: {
    setUser() {
      let user = this.user
      if (typeof (user) === 'string') user = JSON.parse(user)
      this.roleId = user['roleId']
      this.userId = user['userId']
    },
    getNote() {
      this.$http.get(api.USER_NOTE).then(
        res => {
          if (res.error.code === HTTPSUCCESS) {
            this.note = res.result
          }
        }
      )
    },
    getTodoList() {
      const params = {}
      if (this.roleId === 2) params.saleId = this.userId
      this.$http.get(api.USER_TODO, params).then(
        res => {
          if (res.error.code === HTTPSUCCESS) {
            this.todoList = res.result
            this.todoList.forEach(todo => {
              this.$notify({
                title: '等待您处理',
                dangerouslyUseHTMLString: true,
                message: '<strong style="color: #409eff">' + todo.msg + '</strong>',
                offset: 100,
                duration: 10000,
                type: 'warning'
              })
            })
          }
        }
      )
    },
    getOrderCountList() {
      this.$http.get(api.USER_ORDER).then(
        res => {
          if (res.error.code === HTTPSUCCESS) {
            res.result.forEach(e => {
              this.orderSize += e.count
              if (e.count > 0) {
                e.statusClass = 'text item warning'
              } else {
                e.statusClass = 'text item'
              }
            })
            this.orderList = res.result
          }
        }
      )
    },
    gotoOrder(status) {
      const param = status + ''
      this.$router.push({
        name: 'order',
        query: {
          status: param
        }
      })
    },
    saveNote() {
      this.$http.get(api.USER_NOTE_EDIT, { note: this.note }).then(
        res => {
          if (res.error.code === HTTPSUCCESS) {
            this.$msg._message('保存成功', 'success')
            this.getNote()
          }
        }
      )
    }
  }
}
</script>

